<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="central/include :: header('工艺流程监控')" />
    <th:block th:include="include :: vue2-org-tree-css" />
    <style>
        /* 盒子css */
        .floating{
            background: rgba(0, 0, 0, 0.7);
            width: 160px;
            height: 150px;
            position: absolute;
            color: #fff;
            padding-top: 15px;
            border-radius: 15px;
            padding-left: 15px;
            box-sizing: border-box;
            left:0;
            top: 0;
            transition: all 0.3s;
            z-index: 999;
            text-align: left;
            font-size: 12px;
        }
        /*.org-tree-container{*/
        /*    margin: 0px 25%;*/
        /*}*/
    </style>
</head>
<body class="gray-bg">
<div id="app" class="container-div">

    <div class="row" >
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>产品批次号：</label>
                            <select name="productBatchNo" v-model="params.productBatchNo" >
                                <option v-for="(select,index) in productBatchNoList" :value="select.value" :key="index" >{{select.value}}</option>
                            </select>
                        </li>
                        <li>
                            <label>排列方式：</label>
                            <div>
                                <el-switch
                                        v-model="orgTreeConfig.horizontal"
                                        active-text="水平排列"
                                        inactive-text="垂直排列">
                                </el-switch>
                            </div>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" @click="getProductOrgTree"><i class="fa fa-search"></i>&nbsp;搜索</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-12 select-table table-striped" style="font-size: 20px;">
            <el-scrollbar :style="'width:100%;'" class="el-org-tree">
                <vue2-org-tree
                        :data="productOrgTree"
                        @on-node-click="onNodeClick"
                        :render-content="renderContent"
                        :horizontal="orgTreeConfig.horizontal"
                        @on-node-mouseover="onNodeMouseover"
                        @on-node-mouseout="onNodeMouseout"
                        :label-width="orgTreeConfig.labelWidth"
                ></vue2-org-tree>
            </el-scrollbar>
        </div>
        <div v-show="detailedInformationShow" class="floating">
            <template v-if="detailedInformationData">
                <p>物料编号:{{detailedInformationData.source|formatData('artProcessRun.prodBatchNo')}}</p>
                <p>工艺名称：{{detailedInformationData.source|formatData('artProcessRun.name')}}</p>
                <p  v-if="detailedInformationData" >加工工艺状态：{{detailedInformationData.source.artProcessRun|showDescriptorByTaskStatusValue}}</p>
                <div v-show-process-step-run-descriptor="detailedInformationData.source"></div>
            </template>
        </div>
    </div>
</div>

<th:block th:include="central/include :: footer" />
<th:block th:include="include :: vue2-org-tree-js" />
<th:block th:include="central/include :: import-js('centralProduct')"/>
<script th:inline="javascript">

    const taskOfColorDatas = [[${@dict.getType('task_of_color')}]];
    const taskStatusDataList = [[${@dict.getType('sys_task_status')}]]

    const vm = new Vue({
        el:'#app',
        data(){
            return{
                detailedInformationShow:false,
                detailedInformationData:null,
                prefix:'/central/processFlowMonitoring',
                params:{
                    productBatchNo:'' ,
                },
                productBatchNoList:[],//产品批次号列表
                productOrgTree:{

                },artProcessRunMap:new Map(),
                orgTreeConfig:{
                    horizontal:false,
                    labelWidth:200,
                },taskOfColorMap:new Map(),
            }
        },
        methods:{
            onNodeMouseover(e,data){
                if(this.artProcessRunMap.has(data.id)){
                    this.detailedInformationShow = true
                    this.detailedInformationData = data
                    let floating =  document.getElementsByClassName('floating')[0];
                    floating.style.left = e.clientX +'px';
                    floating.style.top = e.clientY+'px';
                }
            },onNodeMouseout(e,data){
                this.detailedInformationShow = false
            },
            getProductOrgTree(){
                //加载产品树
                axios.all(
                    [$.axiosRequest.get(`${this.prefix}/getTree/${this.params.productBatchNo}`),
                        $.axiosRequest.get(`${this.prefix}/getArtProcessRun/${this.params.productBatchNo}`)
                    ]
                ).then(axios.spread((res1,res2)=>{

                    this.productOrgTree = res1.data

                    const artProcessRunArray = res2.data

                    if(artProcessRunArray && artProcessRunArray instanceof Array){
                        artProcessRunArray.forEach(item=>{
                            if(item.material){
                                const materialTypeId = item.material.typeId
                                if(this.artProcessRunMap.has(materialTypeId)){
                                    if(this.artProcessRunMap.get(materialTypeId) instanceof Array){
                                        this.artProcessRunMap.get(materialTypeId).add(item)
                                    }else{
                                        this.artProcessRunMap.set(materialTypeId,[this.artProcessRunMap.get(materialTypeId),item])
                                    }
                                }else{
                                    this.artProcessRunMap.set(materialTypeId,item)
                                }
                            }
                        })
                    }
                }))
            },getProductNoList(){
                $.operation.getSimpleList({prefix:$.centralProductBusiness.prefix})
                    .then(res=>{
                        const data = res.data
                        if(data instanceof Array){
                            this.productBatchNoList = res.data
                            this.params.productBatchNo = this.productBatchNoList[0].value

                            this.getProductOrgTree()
                        }
                    })
            },onNodeClick(e,data){//节点点击事件
                console.log("e",e,"data",data)
            },collapse(list) {
                let _this = this
                list.forEach(item=>{
                    if(item.expand){
                        item.expand = false
                    }
                    item.child && _this.collapse(item.child)
                })
            },onExpand(e,data){

                console.log("e",e,"data",data)

                if ("expand" in data) {
                   data.expand = !data.expand
                   if(!data.expand && data.child){
                        this.collapse(data.child)
                   }
                } else {
                    this.$set(data, "expand", true);
                }
            },renderContent(h, data)
            {
                if(!data.source)return
                const materialTypeId = data.source.id
                if(this.artProcessRunMap.size>0 && this.artProcessRunMap.has(materialTypeId)){

                    let artProcessRun = null

                    const value = this.artProcessRunMap.get(materialTypeId)
                    const parentTypeId = data.parent && data.parent.id
                    if(value instanceof Array){
                        artProcessRun = value.find(item=>item.material && item.material.parentTypeId == parentTypeId)
                    }else{
                        if(value.material && value.material.parentTypeId == parentTypeId)
                            artProcessRun = value
                    }
                    data.source.artProcessRun = artProcessRun

                    const taskStatus = artProcessRun && artProcessRun.taskStatus+''
                    const taskOfColor = taskStatus && this.taskOfColorMap.get(taskStatus)
                    if(taskOfColor){
                        data.style = JSON.parse(taskOfColor.cssClass)
                    }
                }
                return h('h1', {}, data.name)
            }
        },
        created(){
            taskOfColorDatas.forEach(item=>{
                this.taskOfColorMap.set(item.dictValue,item)
            })
            this.getProductNoList()
        },filters:{
            showDescriptorByTaskStatusValue(artProcessRun,defaultValue='状态丢失'){
                if(artProcessRun && artProcessRun.taskStatus){
                    const taskStatus = artProcessRun.taskStatus
                    const dict = taskStatusDataList.find(item=> item.dictValue == taskStatus)
                    if(dict)
                        return dict.dictLabel
                }
                return defaultValue
            },formatData(source,property,defaultValue='暂无数据'){
                let value = source;

                const propertyArray = property.split('.')

                for(let p in propertyArray){
                    value = value && value[propertyArray[p]]
                }
                return value?value:defaultValue
            }
        },directives:{
            showProcessStepRunDescriptor(el, binding, vnode){
                const source = binding.value
                const oldSource = binding.oldValue
                if(source == oldSource)return
                if(!source || !source.artProcessRun ){
                    el.style.height = '150px'
                    el.innerHTML = ''
                    return;
                }
                const artProcessRun = source.artProcessRun
                const processStepRun = artProcessRun.processStepRun
                const operationStationName = artProcessRun.material && artProcessRun.material.operationStation && artProcessRun.material.operationStation.name
                if(processStepRun && (artProcessRun.taskStatus == task_status.EXECUTING
                    || artProcessRun.taskStatus == task_status.NOT_START
                    || artProcessRun.taskStatus == task_status.STOP
                )){
                    const dict = taskStatusDataList.find(item=> item.dictValue == processStepRun.taskStatus)
                    el.style.height = '170px'
                    el.innerHTML =
                        `<p>操作站位：${operationStationName?operationStationName:'暂无数据'}</p>
                        <p>工序名称：${processStepRun.name}</p>
                        <p>工序执行状态：${dict.dictLabel}</p>`
                }else{
                    el.style.height = '150px'
                    el.innerHTML = ''
                }
            }
        }
    })
</script>
</body>
</html>
